<template>
    <div class="gongyi">
        <h2>公益中心管理</h2>
<!--添公益按钮-->
        <el-button type="primary" class="addgongyi" @click="mm1">添加公益</el-button>

        <!--添加公益的弹窗-->
        <el-dialog title="添加公益" :visible.sync="dialogaddgongyiVisible" class="newtan">
            <!--添加公益的表单-->
            <el-form :label-position="right" label-width="80px" :model="formLabelAlign">
                <el-form-item label="标题">
                    <el-input v-model="formLabelAlign.title"></el-input>
                </el-form-item>
                <el-form-item label="简介">
                    <el-input v-model="formLabelAlign.jianjie"></el-input>
                </el-form-item>

                <el-form-item label="图片" :label-width="formLabelWidth">
                    <el-upload
                            action="http://localhost:8080/gongyi/upload"
                            list-type="picture-card"
                            :on-success="uploadImg1"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>

                <el-form-item label="详情">
                    <el-input v-model="formLabelAlign.xiangqing"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogaddyizhanVisible = false" size="small">取 消</el-button>
                <el-button @click="addgongyi" size="small">保 存</el-button>
            </div>
        </el-dialog>



       <!--公益展示表格-->
        <el-table :data="gongyiArray" border style="width: 100%"
                  :cell-style="{'text-align':'center',height:'57px'}"
                  class="gongyitable"
                  :header-cell-style="{'background-color': '#1890ff','color':'#ffffff','text-align':'center'}">
            <el-table-column
                    prop="gongyiId"
                    label="ID">
            </el-table-column>

            <el-table-column
                    prop="gongyiTitle"
                    label="标题">
            </el-table-column>

            <el-table-column
                    prop="gongyiPicture"
                    label="图片">
                <template slot-scope="scope">
                    <img :src="scope.row.gongyiPicture" alt="图片" style="width: 100px; height: 100px;"/>
                </template>
            </el-table-column>

            <el-table-column
                    prop="gongyiJianjie"
                    label="简介"
                    :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                    prop="gongyiXiangqing"
                    label="详情"
                    :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                    prop="gongyiTime"
                    label="时间">
            </el-table-column>
            <el-table-column
                    prop="gongyiDel"
                    label="状态">
                <template scope="scope">
                    <span v-if="scope.row.gongyiDel==1">
                        <el-tag type="success">上线</el-tag>
                    </span>
                    <span v-else-if="scope.row.gongyiDel==0">
                        <el-tag type="danger">下线</el-tag>
                    </span>
                </template>
            </el-table-column>

            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.courierStationStatus==0" type="text" size="mini" @click="shangjia(scope.row)">立即上线</el-button>
                    <el-button v-else type="text" size="mini" @click="xiajia(scope.row)">立即下线</el-button>
                    <el-button type="text" @click="edityizhan(scope.$index)" size="mini" class="bianjianniu">编辑</el-button>
                    <!--编辑驿站的弹窗-->
                    <el-dialog title="编辑驿站" :visible.sync="dialogedityizhanVisible" class="edityizhan">
                        <span class="newts">驿站名字</span>
                        <el-input v-model="edityizhanname" class="yizhannewshuru" placeholder="请输入驿站名字" size="medium"></el-input><br>
                        <span class="newts" style="float: left" id="yizhantu2">驿站图片</span>
                        <el-upload
                                class="avatar-uploader"
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-upload avatar-uploader-icon"></i>
                        </el-upload>
                        <span class="newts">所属地区</span>
                        <el-cascader
                                :options="addressAll"
                                clearable
                                size="medium"
                                v-model="yizhaneditaddress"
                                :props="{value:'label'}"
                                class="jiliank">
                        </el-cascader>

                        <el-input v-model="editdetailadress" class="adressdatail" placeholder="请填写详细地址" size="medium"></el-input><br>
                        <span class="newts">所属小区</span>
                        <el-select v-model="editselectedValue" placeholder="请选择所属小区" class="addown">
                            <el-option v-for="item in ownarray" :key="item.communityId" :label="item.communityName+'('+item.communityProvince+item.communityCity+item.communityDistrict+item.communityAddress+')'" :value="item.communityId"></el-option>
                        </el-select>

                        <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogedityizhanVisible = false" size="small">取 消</el-button>
                            <el-button @click="saveyizhan" size="small">保 存</el-button>
                        </div>
                    </el-dialog>

                </template>
            </el-table-column>



        </el-table>


        <!--分页-->
        <el-pagination
                layout="prev, pager, next"
                class="page"
                :total="100">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "GongyiComponent",
        data(){
            return{
                gongyiArray:[],//数据源
                dialogaddgongyiVisible:false, //控制新增公益的弹窗
                //labelPosition:left,添加公益的表单对齐方式
                formLabelAlign:{
                    title:"",
                    jianjie:"",
                    picture:"",
                    xiangqing:""
                },
                //图片
                dialogImageUrl: '',
                dialogVisible: false,
                disabled: false,
            }
        },
        methods:{
             //弹窗
             mm1(){
                 this.dialogaddgongyiVisible = true
             },
            // 图片上传
            handleRemove(file) {
                console.log(file);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            handleDownload(file) {
                console.log(file);
            },
            uploadImg1(r){
                console.log(r.data);
                this.gongyiArray.picture="http://localhost:8080/gongyi/down?filename="+r.data;
                console.log(this.gongyiArray.picture)
            },
            addgongyi(){
                 console.log("opoppopoopoppo")
                console.log(this.formLabelAlign.title)
                console.log(this.formLabelAlign.jianjie)
                console.log(this.gongyiArray.picture)
                console.log(this.formLabelAlign.xiangqing)
                 this.axios.get("http://localhost:8080//gongyi/add",{
                     params:{
                         title:this.formLabelAlign.title,
                         jianjie:this.formLabelAlign.jianjie,
                         picture:this.gongyiArray.picture,
                         xiangqing:this.formLabelAlign.xiangqing,
                     }
                 }).then(res=>{
                     console.log("hhhhhhhhhhh")
                     console.log(res)
                 })
                this.dialogaddgongyiVisible=false
            }

        },
        created() {
            this.axios.get("http://localhost:8080/gongyi/Allgongyi",{
                params:{
                    page:1,
                    size:5
                }
            }).then(res=>{
                console.log("bbbbbbb")
                console.log(res.data.data)
                this.gongyiArray=res.data.data;
            })
        }

    }
</script>

<style scoped>
    .gongyi{
        /*text-align: center;*/
        padding: 20px;
    }
    h2{
        text-align: center;
    }
    .gongyitable{
        margin-top: 20px;
    }

</style>